import React, { Component } from 'react';
import ReactSwipe from 'react-swipe';
import './index.less'
// class Swipe extends Component {
//     render() {
//         console.log(this.props.data.length)
//         return (
//             <div className="sliders">
//                 {this.props.data.length?<ReactSwipe className="carousel" swipeOptions={{continuous: false}}>
//                 {this.props.data.map((item,index)=>{
//                     <div key={index}><img src={item} alt=""/></div>
//                 })}
//             </ReactSwipe>:<div>正在加载</div>}
//             </div>
           
//         );
//     }
// }
class Swipe extends Component {
    constructor(){
        super()
        this.state={index:0}
    }
    render() {
        let opts = {
            continuous: false,
            callback:(index)=>{//哪个的索引
               this.setState({index:index})
            }  
        }
        return (
            <div className="sliders">
            {this.props.data.length? <ReactSwipe className="carousel" swipeOptions={opts}>
                {
                    this.props.data.map((item, index) => (
                    <div key={index}><img src={item} alt=""/></div>
                    ))
                }
            </ReactSwipe>:<div>正在加载</div>
            }
            <div className="dots">
                {
                    this.props.data.map((item, index) => (
                        <span key={index} className={this.state.index === index? 'active':''}></span>
                    ))
                }
            </div>
            </div>
        );
    }
}


export default Swipe;